/**
 * create by young (young2f@outlook.com) on 2021/2/6
 */
'use strict';
import React from 'react';

import ComponentBase from "../../Base/ComponentBase";
import {Form} from "antd";
import echarts from 'echarts/lib/echarts';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/bar';

@Form.create()
export default class TBar extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.initChart();
  }

  initChart() {
    const myChart = echarts.init(this.echartsBox)
    myChart.setOption(this.setOption())
    myChart.on('finished', () => {
      myChart.resize()
    })
  }

//这是一个最简单的饼图~
  setOption() {
    const {xData, data, title} = this.props
    return {
      // title: {text: 'ECharts 入门示例'},
      title: {text: title},
      tooltip: {},
      xAxis: {
        // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        data: xData
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data

        // data: [5, 20, 36, 10, 10, 20]
      },
        {
          name: '销量',
          type: 'bar',
          data

          // data: [5, 20, 36, 10, 10, 20]
        }

      ]
    }
  }

  render() {
    const {width = 200, height = 200, style = {}} = this.props;
    return (
      <div ref={(c) => {
        this.echartsBox = c
      }} style={{width, height, ...style}}>
      </div>
    )
  }
}
